<template>
  <div>
    <el-dialog :destroy-on-close="true" :lock-scroll="false" title="完成" :visible.sync="visible" width="450px"
               :before-close="cancel">
      <el-form label-width="auto" style="margin-top: 20px" :rules="rules" :model="form" ref="form">
        <el-form-item label="实际完成日期：" prop="complete_at">
          <el-date-picker v-model="form.complete_at" class="c-picker" placeholder="选择实际完成日期" type="date"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit('form')" :loading="loading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start_at:'',
      pickerOptions: {
        disabledDate: (time) => {
          let flag = false
          if (this.start_at) {
            flag =  time.getTime() <= new Date(this.start_at).getTime()-24*60*60*1000;
          }
          return flag || time.getTime() > Date.now()
        }
      },
      id: '',
      rules: {
        complete_at: [
          {required: true, message: '请选择完成日期', trigger: 'blur'},
        ],
      },
      form: {
        complete_at: null
      },
      visible: false,
      loading: false,

    }
  },
  methods: {
    active(row) {
      this.visible = true;
      this.id=row.id
      this.start_at=row.start_at
    },
    /*提交完成*/
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post(`/projects/${this.id}/complete`, this.form).then(res => {
            this.loading = false
            if (res.data.success) {
              this.cancel()
              this.$emit('reload')
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
          })
        }
      });
    },
    cancel() {
      this.$refs.form.resetFields()
      this.visible = false
    },
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
</style>
